<template>
  <div id="preview">
    <van-nav-bar title="预览营养处方" left-arrow left-text="返回" @click-left="onClickLeft" fixed placeholder>
      <template #right >
        <!-- <span @click="$router.push(`/NutritionPrescriptionList/${detailId}`)">历史营养处方</span> -->
      </template>
    </van-nav-bar> 
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
     
      <div class="content">
        <div class="fangan">
          <div class="titlename">营养康复方案</div>
          <div class="info">
            <span @click="$router.push('/mydoctor')">主管医生：{{ fangan.doctor_name }}</span>
            <span>{{ fangan.created }}</span>
          </div>
          <div class="zlyz">
            <span @click="toFangan"
            >解决方案 <img src="@/assets/images/doctoradd (4).png" alt=""
            /></span>
          </div>
          <div class="massage">
            <div class="nums">
              <van-row type="flex" justify="space-between" align="center">
                <van-col span="9">建议摄入能量</van-col>
                <van-col span="6" class="sz" style="color:#4EC0B8">{{
                    fangan.nengliang ? fangan.nengliang : 0
                  }}
                </van-col>
                <van-col span="6" style="text-align:right">千卡</van-col>
              </van-row>
              <van-row type="flex" justify="space-between" align="center">
                <van-col span="9">建议摄入蛋白质</van-col>
                <van-col span="6" class="sz" style="color:#FD7E6F">{{
                    fangan.danbaizhi ? fangan.danbaizhi : 0
                  }}
                </van-col>
                <van-col span="6" style="text-align:right">克</van-col>
              </van-row>
            </div>
            <div class="ywfa">
              <div class="title">营养解决方案</div>
              <div class="time-line">
                <div class="t-line">
                  <div
                    class="t-line__item"
                    v-for="(item,index) in fangan.list"
                    :key="index"
                  >
                    <div class="t-line__item-date">{{ item.time }}</div>
                    <div class="t-line__item-line"></div>
                    <div
                      class="t-line__item-info"
                      :class="item.active ? 'active' : 'NoChange'"
                    >
                      <van-row type="flex" align="center" justify="center">
                        <van-col span="6"
                        ><img
                          :src="
                              item.active == 1 ? item.icon_hover : item.icon
                            "
                          alt=""
                        />
                        </van-col>
                        <van-col span="18">
                          <div class="title">
                            {{
                              item.ty == 1
                                ? "口服营养"
                                : item.ty == 2
                                ? "饮食"
                                : item.ty == 3
                                  ? "运动"
                                  : "药物"
                            }}
                          </div>
                          <div class="info">
                            {{ item.title }} {{ item.info }}
                            <p v-if="item.ty == 3">{{ item.shichang }}分钟</p>
                          </div>
                        </van-col>
                      </van-row>
                    </div>
                  </div>
                  <!-- <div class="line" ref="line"></div> -->
                </div>
              </div>
<!--              <div class="more" v-show="this.fangan.list!== undefined && this.fangan.list.length > 7" @click="showMore">-->
<!--                <img src="@/assets/images/more.png" alt=""/>-->
<!--                <span>查看更多</span>-->
<!--              </div>-->
            </div>
          </div>
          <div class="video" v-show="fangan.videos">
            <van-cell>
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <span class="custom-title">营养康复方案教程</span>
              </template>
            </van-cell>
            <van-row gutter="20">
              <van-col
                span="8"
                v-for="(item, index) in fangan.videos"
                :key="index"
                @click="showOverlay(item.video_url)"
              >
                <div class="videoPlay">
                  <img :src="item.video_poster" alt="" class="bg">
                  <img src="@/assets/images/play.png" alt="" class="play"/>
                  <span class="tit">{{ item.title }}</span>
                </div>
              </van-col>
            </van-row>
          </div>
          <van-overlay :show="show" @click="showHide">
            <div class="wrapper">
              <div class="video" @click.stop>
                <video-player class="video-player vjs-custom-skin"
                              ref="videoPlayer"
                              :playsinline="true"
                              :options="playerOptions"
                              @play="onPlayerPlay($event)"
                              @pause="onPlayerPause($event)"
                ></video-player>
              </div>
            </div>
          </van-overlay>
        </div>
      </div>
    </van-pull-refresh>
    <van-button class="btn" @click="submit" type="info" block>提交</van-button>
  </div>
</template>

<script>
import {home} from "@/apis/home";
import { addchufang } from "@/apis/treatmentplan";
export default {
  name: "patientIndex",

  data() {
    return {
      images: [],
      tixing: [],
      fangan: {},
      isLoading: false,
      active: 0,
      show: false,
      url: "",
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "video/mp4",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" //url地址
        }],
        poster: "../../static/images/test.jpg", //你的封面地址
        width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true  //全屏按钮
        }
      },
      lengthList: "",
      listArray: [],
      listno: [],
      yulan:null
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
    onPlayerPlay($event) {
      //console.log()
      document.querySelector('.vjs-big-play-button').style.display = 'none'
    },
    onPlayerPause($event) {
      document.querySelector('.vjs-big-play-button').style.display = 'block'
    },
    addlog() {
      this.$router.push({path: "log"});
    },
    onRefresh() {
      this.load();
    },
    toFangan() {
      localStorage.setItem("yuanze",JSON.stringify(this.yulan))
      this.$router.push(`/fangan`)
    },
    load() {
      this.isLoading = false;
      this.fangan = this.yulan;
      if (this.fangan.list && this.fangan.list.length > 0) {
        var newData = [];
        this.fangan.list.forEach((item,index)=>{
          if(item.time.split(":")[0].length < 2) {
            item.time = '0' + item.time.split(":")[0] + ":" + item.time.split(":")[1]
          }
        })
        this.fangan.list.sort(function (a, b) {
          return a.time.localeCompare(b.time);//升序
        });
        var myDate = new Date();
        let getHours = myDate.getHours(); //获取当前小时数(0-23)
        let getMinutes = myDate.getMinutes(); //获取当前分钟数(0-59)
        if (getHours < 10) {
          getHours = "0" + getHours;
        }
        let hours = getHours * 3600 + getMinutes * 60;
        let list = this.fangan.list;
        let array = [];
        let timestamp = [];
        let timestamp1 = [];
        list.forEach(item => {
          array.push(item.time);
          let hour = item.time.split(":")[0];
          let min = item.time.split(":")[1];
          let hourMin = hour * 3600 + min * 60;
          timestamp.push(hourMin);
        })
        timestamp.map((item, index) => {
          if (item >= hours) {
            Object.keys(this.fangan.list).map((key, ind) => {
              if (ind === index) {
                this.fangan.list[ind].active = 1;
              }
            });
            timestamp1.push(item);
            console.log(timestamp1.length)
            //console.log((timestamp1.length * 0.2 + (timestamp1.length - 1) / 12) * 50)
            // this.$refs.line.style.height =
            //   (timestamp1.length * 0.06 + (timestamp1.length - 1) / 12) * 50 +
            //   "%";
          } else if(item < hours) {
            Object.keys(this.fangan.list).map((key, ind) => {
              if (ind === index) {
                this.fangan.list[ind].active = 0;
              }
            });
          }
        });
      }

    },
    showOverlay(url) {
      this.playerOptions.sources[0].src = url;
      this.show = true;
    },
    // showMore() {
    //   if (this.fangan.list.length == this.listno.length) {
    //     this.$toast('没有更多了');
    //     return
    //   } else {
    //     this.listArray.forEach(item => {
    //       this.fangan.list.push(item);
    //     })
    //   }
    //
    // },
    showHide() {
      this.show = false;
      this.playerOptions.sources[0].src = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4';
    },
    submit() {
      let form = JSON.parse(localStorage.getItem('submitForm'))
      form.hzid  = parseInt(form.hzid)
      form.action = "add"
      form.id = ""
      addchufang(form)
      .then((res) => {
        this.$toast("新建营养处方成功");
        this.$router.go(-2); //返回患者列表
        localStorage.removeItem('submitForm')
      })
      .catch((err) => {
        if(err.msg){
          this.$toast(err.msg);
        }else{
          this.$toast("网络错误"); 
        }
      });
     
    }
  },

  mounted() {
    this.load();
    
  },
  created() {
    let arr = localStorage.getItem("yulan")
    this.yulan = JSON.parse(arr)
  },
  // destroyed () {
  //   localStorage.removeItem("yulan")
  // }
};
</script>

<style lang="less">
#preview {
  // margin-top: 45px;
  text-align: left;
  // padding-bottom: 60px !important;
   .van-icon,.van-nav-bar__text {
     color: #404040;
    }
  .van-notice-bar {
    background-color: transparent;
    padding: 0;
    margin-top: 10px;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .video-js {
    width: 375px;
    height: 150px;
    margin: 10px 0 0 0;

    .video-player {
      border-radius: 5px;
    }

    .vjs-big-play-button {
      font-size: 3em;
      line-height: 44px !important;
      height: 44px !important;
      width: 44px !important;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -22px !important;
      margin-left: -22px;
      padding: 0;
      cursor: pointer;
      opacity: 1;
      border: 0.06666em solid #fff;
      background-color: #2B333F;
      background-color: rgba(43, 51, 63, 0.7);
      border-radius: 50%;
      -webkit-transition: all 0.4s;
      transition: all 0.4s;
    }
  }

  .van-notice-bar__content.van-ellipsis {
    width: 100%;
  }

  .notice-swipe {
    height: 40px;
    line-height: 40px;

    img {
      height: 20px;
    }

    .van-col {
      text-align: center;
      margin: auto 0;

      .avater {
        padding-right: 8px;

        img {
          width: 28px;
          height: 20px;
        }

        i {
          vertical-align: super;
          font-size: 14px;
          font-weight: bold;
          color: #f73700;
        }
      }

      .today {
        position: relative;

        img {
          vertical-align: top;
          width: 46px;
          height: 30px;
          font-weight: bold;
        }

        i {
          width: fit-content;
          position: absolute;
          left: 50%;
          top: 50%;
          color: #fff;
          font-size: 8px;
          font-weight: bold;
          transform: translate(-50%, -50%);
        }
      }
    }

    .introduction {
      text-align: left;

      h1 {
        display: inline;
        font-size: 15px;
      }

      div {
        width: 165px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 14px;

        &:first-child {
          margin-bottom: 8px;
        }
      }
    }
  }

  .my-swipe {
    transform: translateZ(0);
    // height: 150px;
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      // height: 150px;
      // line-height: 150px;
      text-align: center;
      background-color: #fff;

      a,
      img {
        display: block;
        height: 190px;
      }
    }
  }

  .content {
    .remind {
      margin: 10px;
      background-color: #fff;
      border-radius: 15px;
      text-align: left;
      padding: 13px;

      .titlename {
        font-size: 15px;
        font-weight: 500;
        color: #151515;
        padding: 0 0 10px;
        border-bottom: 1px solid #ebebeb;
      }
    }

    .fangan {
      background-color: #fff;
      padding: 11px;

      .titlename {
        font-size: 15px;
        font-weight: 500;
        color: #151515;
        padding: 0 0 10px;
        margin: 0 21px;
        border-bottom: 1px solid #ebebeb;
      }

      .info {
        color: #9b9b9b;
        font-size: 12px;
        margin: 5px 21px;
        position: relative;
        display: flex;
        span {
          display: inline-block;

          &:last-child {
            position: absolute;
            right: 0;
          }
        }
      }

      .zlyz {
        color: #9b9b9b;
        font-size: 12px;
        margin: 0 21px 10px;
        text-align: right;

        img {
          vertical-align: text-bottom;
          width: 15px;
        }
      }

      .massage {
        background-color: #f5f5f5;
        padding: 15px 13px;

        .nums {
          background: rgba(255, 255, 255, 1);
          border-radius: 6px;
          margin-bottom: 12px;

          .van-row {
            padding: 10px;
            font-size: 12px;

            .sz {
              font-size: 20px;
            }

            &:first-child {
              border-bottom: 1px solid #d2d2d2;
            }
          }
        }

        .ywfa {
          padding: 10px;

          .title {
            font-weight: 500;
            font-size: 15px;
            margin-bottom: 16px;
          }

          .time-line {
            position: relative;

            .line {
              position: absolute;
              padding: 10px;
              bottom: 0;
              left: 46px;
              height: 10px;

              &::after {
                content: "";
                position: absolute;
                left: 8px;
                width: 2px;
                height: 100%;
                background: #4589ed;
              }

              &::before {
                position: absolute;
                left: 2px;
                content: "";
                margin-top: -5px;
                width: 10px;
                height: 10px;
                border: 2px solid #fff;
                background: #4589ed;
                box-shadow: 0 0 0 2px #4589ed;
                border-radius: 50%;
              }
            }

            .t-line {
              .t-line__item {
                display: flex;
                position: relative;
                align-items: center;
                 //width: 240px;
                //height:80px;
                margin-bottom: 8px;

                .t-line__item-date {
                  width: 40px;
                  text-align: right;
                }

                .t-line__item-line {
                  //flex: 1;
                  margin: 0 15px;
                  height: 80px;
                  width: 0;
                  border-left: 1px dashed #686868;
                }

                .t-line__item-info {
                  flex: 1;
                  height: 100%;
                  background-color: #fff;
                  border-radius: 10px;
                  img {
                    width: 31px;
                    height: 31px;
                    margin: auto;
                    vertical-align: middle;
                  }

                  .van-row {
                    height: 100%;
                    color: #686868;
                    padding: 13px 8px;
                    font-size: 15px;
                    font-weight: 500;

                    .title {
                      margin-bottom: 5px;
                    }

                    .info {
                      color: #9b9b9b;
                      font-size: 13px;
                      margin: 0;
                      width: 168px;
                      position: static;
                    }
                  }

                  &.active {
                    .title {
                      color: #2b89f5;
                    }
                  }

                  // &.NoChange {
                  //   .title {
                  //     color: #686868;
                  //   }
                  // }
                }
              }
            }
          }

          .more {
            margin: 13px 0 0 48px;

            img {
              width: 15px;
              height: 15px;
              vertical-align: middle;
            }

            span {
              vertical-align: middle;
              color: #9b9b9b;
              font-size: 12px;
              margin-left: 8px;
            }
          }
        }
      }

      .video {
        .van-cell {
          padding: 10px 0;

          &::after {
            left: 0;
            right: 0;
          }
        }


        .van-col {
          margin-top: 11px;
          width: 96px;
          height: 58px;
          margin-right: 5px;
          padding: 0 !important;
          position: relative;

          .videoPlay {
            .bg {
              width: 100%;
              height: 58px;
              z-index: -1;
            }

            .play {
              width: 8px;
              height: 9px;
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              margin: auto;
            }

            .tit {
              background-color: rgba(255, 255, 255, 0.5);
              position: absolute;
              bottom: 0;
              text-align: left;
              left: 0;
              // top: 38px;
              font-size: 6px;
              color: #fff;
              display: block;
              width: 96px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              opacity: 0.5;
              padding-left: 3px;
            }
          }
        }
      }
    }
  }
  .btn{
    width: 90vw;
    margin: 30px auto;

  }
}
</style>
